<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            overflow: hidden;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;

        }
    </style>
</head>

<body>
    <textarea id="content" cols="30" rows="10"></textarea>
</body>
<script>

    // 事件对象的属性_键盘事件
    // key     事件触发时,按键输出的字符 (针对输出的字符)
    // code    事件触发时,按键对应的键盘符(每个按键都有唯一的键盘符) (针对按下的按键)

    // keyCode(IE) / which 
    //       a. 在onkeydown onkeyup (按键控制 -> 所有按键均可触发) -> 返回按键对应的键盘码(每个按键都有唯一的键盘码  -> 针对按下的按键)
    //       b. 在onkeypress  (按键输入 -> 文本输入相关按键可以触发 数字 字母 标点符号 空格 回车  -> 输出的字符  -> )  返回按键对应的字符编码(ASCII)


    var contentText = document.getElementById("content");

    // ← 37
    // ↑ 38
    // → 39
    // ↓ 40

    // 回车: 13
    // backspace: 8


    /* contentText.onkeydown = function (e) {
        console.log("按键按下", e);
        // console.log(e.key, e.code);
        console.log(e.key, e.code, e.keyCode);

        var keyCode = e.keyCode || e.which;
        switch (keyCode) {
            case 37: console.log("左"); break;
            case 38: console.log("上"); break;
            case 39: console.log("右"); break;
            case 40: console.log("下"); break;
        }
    } */


    // contentText.onkeypress = function (e) {
    //     console.log("按键按下", e);
    //     // console.log(e.key, e.code);
    //     console.log(e.key, e.keyCode);
    // }



    // 组合键:  监听是否按下对应的组合键
    // ctrl + c
    // ctrl + v
    // ctrl + enter

    contentText.onkeydown = function (e) {
        console.log("按键按下", e);
        // console.log(e.key, e.code);
        console.log(e.key, e.keyCode);

        var keyCode = e.keyCode || e.which;

        // 监听是否按下对应的按键 
        if (e.ctrlKey && keyCode == 67) {
            console.log("按下了复制");
        } else if (e.ctrlKey && keyCode == 86) {
            console.log("按下了粘贴");
        } else if (e.ctrlKey && keyCode == 13) {
            console.log("快捷发送");
        }

    }






</script>

</html>